<template>
  <div class="table-canvas">
    <button @click="toggle">{{showLine?'隐藏折线':'显示折线'}}</button>
    <table ref="table">
      <thead>
        <tr>
          <th v-for="i in 10" :key="i">
            <span>{{i}}</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(tr,trid) in arr1" :key="trid">
          <td v-for="(td,tdid) in tr" :key="tdid">
            <span :class="{'dot':td.active}">{{td.value}}</span>
          </td>
        </tr>
        <tr v-for="(tr,trid) in arr2" :key="trid+10">
          <td v-for="(td,tdid) in tr" :key="tdid">
            <span :class="{'dot1':td.active}">{{td.value}}</span>
          </td>
        </tr>
        <tr v-for="(tr,trid) in arr3" :key="trid+20">
          <td v-for="(td,tdid) in tr" :key="tdid">
            <span :class="{'dot2':td.active}">{{td.value}}</span>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import CanvasLine from './canvasLine'
const getRandomArr = () => {
  return Array(10)
    .fill()
    .map((v, i) => {
      let active = Math.floor(Math.random() * 10)
      return Array(10)
        .fill()
        .map((v, i) => {
          return {
            value: Math.floor(Math.random() * 100),
            active: i == active
          }
        })
    })
}
export default {
  name: 'TableCanvas',
  data() {
    return {
      showLine: true,
      arr1: getRandomArr(),
      arr2: getRandomArr(),
      arr3: getRandomArr()
    }
  },
  mounted() {
    this.canvasLine = new CanvasLine({
      table: this.$refs.table,
      lineTypes: [
        { selector: '.dot', lineColor: 'red', lineWidth: 1 },
        { selector: '.dot1', lineColor: 'green', lineWidth: 2 },
        { selector: '.dot2', lineColor: 'blue', lineWidth: 3 }
      ]
    })
  },
  methods: {
    toggle() {
      this.showLine = !this.showLine
      this.showLine ? this.canvasLine.show() : this.canvasLine.hide()
    }
  },
  updated() {
    this.canvasLine.draw()
  }
}
</script>

<style scoped>
.table-canvas {
  margin-bottom: 1000px;
}
.canvasArr .canvas_item {
  position: absolute;
  z-index: 1;
}

table {
  width: 100%;
  font-family: verdana, arial, sans-serif;
  font-size: 11px;
  color: #333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
}
table th {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
}
table td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
}
.dot {
  display: inline-block;
  width: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: red;
  color: #fff;
}
.dot1 {
  display: inline-block;
  width: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: green;
  color: #fff;
}
.dot2 {
  display: inline-block;
  width: 30px;
  line-height: 30px;
  border-radius: 50%;
  background: blue;
  color: #fff;
}
</style>